<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<meta name="author" content="kener.linfeng@gmail.com">
<title>ECharts · Example</title>

<link rel="shortcut icon" href="./asset/ico/favicon.png">

<link href="./asset/css/font-awesome.min.css" rel="stylesheet">
<link href="./asset/css/bootstrap.css" rel="stylesheet">
<link href="./asset/css/carousel.css" rel="stylesheet">
<link href="./asset/css/echartsHome.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
.affix {
	width: 160px;
}

.affix li {
	list-style-type: none;
	height: 35px;
	line-height: 35px;
	vertical-align: middle;
}

ul.slides li {
	width: 33.3%;
	overflow: hidden;
	float: left;
	border: 0px solid #ccc;
	margin: 15px 0;
	list-style-type: none;
	position: relative;
}

ul.slides li a {
	padding: 5px;
	display: block;
}

ul.slides li a strong {
	font-size: 15px;
	color: #1e90ff;
}

ul.slides li a:hover {
	background-color: #eee;
	text-decoration: none;
}

ul.slides li img {
	width: 60%;
}

ul.slides li span {
	color: #666;
	width: 36%;
	vertical-align: top;
	display: inline-block;
	*zoom: 1;
}

.col-md-10 h3 {
	clear: both;
	margin: 10px 0;
	padding-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.col-md-10 h3 a {
	display: inline-block;
	*zoom: 1;
	padding-top: 63px;
}

#chartsTypeNav ul li {
	transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-webkit-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	padding-left: 10px;
}
</style>
</head>

<body>
	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation"
		id="head"></div>

	<div class="container" style="padding-top: 10px;">
		<div class="row-fluid">
			<div class="col-md-2">
				<div class='affix' style="margin-left: -20px;" id="chartsTypeNav">
					<ul style="padding: 5px 0;">
						<li><i class="ec-icon ec-icon-line"></i> <a href="#line"><abbr
								title="Line & Area">Line</abbr></a></li>
						<li><i class="ec-icon ec-icon-bar"></i> <a href="#bar"><abbr
								title="Column & Bar">Bar</abbr></a></li>
						<li><i class="ec-icon ec-icon-scatter"></i> <a
							href="#scatter"><abbr title="Scatter & Bubble">Scatter</abbr></a></li>
						<li><i class="ec-icon ec-icon-k"></i> <a href="#k">Candlestick</a></li>
						<li><i class="ec-icon ec-icon-pie"></i> <a href="#pie"><abbr
								title="Pie & Doughnut">Pie</abbr></a></li>
						<li><i class="ec-icon ec-icon-radar"></i> <a href="#radar">Radar</a></li>
						<li><i class="ec-icon ec-icon-chord"></i> <a href="#chord">Chord</a></li>
						<li><i class="ec-icon ec-icon-force"></i> <a href="#force"><abbr
								title="Force-Directed Charts">FD Charts</abbr></a></li>
						<li><i class="ec-icon ec-icon-map"></i> <a href="#map">Maps</a></li>
						<li><i class="ec-icon ec-icon-gauge"></i> <a href="#gauge">Gauges</a></li>
						<li><i class="ec-icon ec-icon-funnel"></i> <a href="#funnel">Funnels</a></li>
						<li><i class="ec-icon ec-icon-eventRiver"></i> <a
							href="#eventRiver">EventRiver</a></li>
						<li><i class="ec-icon ec-icon-venn"></i> <a href="#venn">Venn</a></li>
						<li><i class="ec-icon ec-icon-treemap"></i> <a
							href="#treemap">Treemap</a></li>
						<li><i class="ec-icon ec-icon-tree"></i> <a href="#tree">Tree</a></li>
						<li><i class="ec-icon ec-icon-wordCloud"></i> <a
							href="#wordCloud">WordCloud</a></li>
						<li><i class="ec-icon ec-icon-mix"></i> <a href="#mix">Combinations</a></li>
						<li><i class="ec-icon ec-icon-component"></i> <a
							href="#component">Components</a></li>
						<li><i class="ec-icon ec-icon-other"></i> <a href="#other">Others</a></li>
						<li><i class="ec-icon ec-icon-theme"></i> <a href="#theme">Themes</a></li>
						<li><i class="ec-icon ec-icon-topic"></i> <a href="#topic">Features</a></li>
					</ul>
				</div>
			</div>
			<div class="col-md-10">
				<p style="margin: 10px 0 -30px 0">
					<a href="./start-en.html" target="_blank"
						style="margin-right: 50px;">Getting started »</a> <a
						href="https://github.com/ecomfe/echarts/issues?page=1&state=open"
						target="_blank">Any feedback or question ? »</a>
				</p>
				<div>
					<h3>
						Line<a name="line"> </a>
					</h3>
					<div class="section">
						<div class="thumb3">
							<ul class="slides">
								<li data-thumb="asset/img/example/line1.png"><a
									href="example/line1.html"><img
										src="asset/img/example/line1.png"> <span><strong>Basic
												Line</strong><br />label, custom line shadow</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Stacked
												Line</strong><br />multiple sreies stack</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line5.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Line</strong><br />inverted axes, smoothed line</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Area</strong><br />vertical fill, smoothed line</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Stacked
												Area</strong><br />multiple sreies stack</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line7.html"><img
										src="asset/img/example/cache.png"> <span><strong>Irregular
												Line</strong><br />two value axis</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line8.html"><img
										src="asset/img/example/cache.png"> <span><strong>Irregular
												Line</strong><br />time axis</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line6.html"><img
										src="asset/img/example/cache.png"> <span><strong>Area</strong><br />reversed
											value axis</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line.html"><img
										src="asset/img/example/cache.png"> <span><strong>Line</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/line9.html"><img
										src="asset/img/example/cache.png"> <span><strong>Logarithmic
												Axis</strong></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Bar (Column)<a name="bar"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/bar1.png"><a
									href="example/bar1.html"><img
										src="asset/img/example/bar1.png"> <span><strong>Basic
												Column</strong><br />label, annotation</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Stacked
												Column</strong><br />multiple sreies stack</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar10.html"><img
										src="asset/img/example/cache.png"> <span><strong>Thermometer</strong><br />custom
											style, tooltip display</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar7.html"><img
										src="asset/img/example/cache.png"> <span><strong>Compositive
												Waterfall</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar6.html"><img
										src="asset/img/example/cache.png"> <span><strong>Change
												Waterfall</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar12.html"><img
										src="asset/img/example/cache.png"> <span><strong>Stacked
												and Clustered Column</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Bar</strong><br />inverted axes</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Stacked
												Bar</strong><br />click on a legend key to show or hide a series</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar9.html"><img
										src="asset/img/example/cache.png"> <span><strong>Stacked
												Floating Bar</strong><br />transparent data-driven style</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar5.html"><img
										src="asset/img/example/cache.png"> <span><strong>Tornado</strong><br />bar
											chart with negative stack</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar8.html"><img
										src="asset/img/example/cache.png"> <span><strong>Tornado</strong><br />staggered
											axes labels</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar13.html"><img
										src="asset/img/example/cache.png"> <span><strong>Irregular
												Bar</strong><br />two value axis</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar11.html"><img
										src="asset/img/example/cache.png"> <span><strong>Timeline</strong><br />display
											how data changes over time</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar14.html"><img
										src="asset/img/example/cache.png"> <span><strong>Rainbow
												bar</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar15.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												sreies rainbow bar</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/bar.html"><img
										src="asset/img/example/cache.png"> <span><strong>Column</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Scatter<a name="scatter"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/scatter1.png"><a
									href="example/scatter1.html"><img
										src="asset/img/example/scatter1.png"> <span><strong>Basic
												Scatter</strong><br />label, annotation</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/scatter2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Bubble</strong><br />bubble size calculation</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/scatter3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Large-Scale
												Scatter</strong><br />enable the setting</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/scatter5.html"><img
										src="asset/img/example/cache.png"> <span><strong>Category
												Scatter</strong><br />scrollable data area</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/scatter6.html"><img
										src="asset/img/example/cache.png"> <span><strong>Time
												data</strong><br />time axis</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/scatter4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Timeline</strong><br />like
											Gapminder</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/dataRange1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Scale
												Roaming</strong><br />basic function</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/scatter.html"><img
										src="asset/img/example/cache.png"> <span><strong>Scatter</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Candlestick<a name="k"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/k1.png"><a
									href="example/k1.html"><img src="asset/img/example/k1.png">
										<span><strong>Candlestick</strong><br />label, zoomable</span></a>
								</li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/k.html"><img
										src="asset/img/example/cache.png"> <span><strong>Candlestick</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Pie<a name="pie"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/pie1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Pie</strong><br />set center, radius</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/pie2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Doughnut</strong><br />set
											center and radius, tooltip display</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/pie3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Nested
												Pie</strong><br />set multiple pies' centers and radii</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/pie4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Nightingale's
												Rose Diagram</strong><br /> radius & area</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/pie5.html"><img
										src="asset/img/example/cache.png"> <span><strong>Doughnut</strong><br />infographic
											style, tooltip technique</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/pie6.html"><img
										src="asset/img/example/cache.png"> <span><strong>Doughnut</strong><br />infographic
											style, extra content addition</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/pie7.html"><img
										src="asset/img/example/cache.png"> <span><strong>Timeline</strong><br />display
											how data changes over time</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/lasagna.html"><img
										src="asset/img/example/cache.png"> <span><strong>Lasagna</strong><br />multi-level
											doughnut chart</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/pie.html"><img
										src="asset/img/example/cache.png"> <span><strong>Pie</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Radar<a name="radar"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/radar1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Radar</strong><br />set polar coordinate system </span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/radar2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Filled Radar</strong><br />fill style</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/radar3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Radars</strong><br />multiple polar coordinate systems</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/wormhole.html"><img
										src="asset/img/example/cache.png"> <span><strong>Wormhole</strong><br />multi-level
											radar chart</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/radar.html"><img
										src="asset/img/example/cache.png"> <span><strong>Radar</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Chord<a name="chord"> </a>
					</h3>
					<div class="section">
						<div class="thumb3">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/chord1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Chord</strong><br />data format, sorting</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/chord2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Dimensions</strong><br />legend selected</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/chord3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Chord</strong><br />data format, sorting</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/chord4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Non-ribbon
												Chord</strong><br />data format, sorting</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/webkit-dep2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Complex
												Topology</strong><br />Webkit dependency</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/chord.html"><img
										src="asset/img/example/cache.png"> <span><strong>Chord</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Force-Directed Charts<a name="force"> </a>
					</h3>
					<div class="section">
						<div class="thumb3">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/force1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Simple
												Topology</strong><br />data format</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/force2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Tree
												Topology</strong><br />data format</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/force4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Tree
												Topology</strong><br />data format</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/webkit-dep.html"><img
										src="asset/img/example/cache.png"> <span><strong>Complex
												Topology</strong><br />Webkit dependency</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/force.html"><img
										src="asset/img/example/cache.png"> <span><strong>Force-Directed
												Layout</strong><br />customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Maps<a name="map"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Map</strong><br />China map, multi-series, Scale Roaming</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Map</strong><br />China map, region selector</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Map</strong><br />event response, switch</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Map</strong><br />world map, Scale Roaming</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map5.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Map</strong><br />world map, region selector</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix5.html"><img
										src="asset/img/example/cache.png"> <span><strong>MultiMap</strong><br />data-driven,
											zoom in</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map20.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												Extension</strong><br />GeoJSON - Chinese city</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map6.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												Extension</strong><br />GeoJSON - Hong Kong</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map7.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												Extension</strong><br />GeoJSON - USA</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map13.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												Extension</strong><br />GeoJSON - Continents</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/bmap1.png"><a
									href="../extension/BMap/doc/BMap.html"><img
										src="asset/img/example/bmap1.png"> <span><strong>ECharts
												Extension</strong><br />map.baidu.com BMap</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/bmap2.png"><a
									href="../extension/BMap/doc/example.html"><img
										src="asset/img/example/bmap2.png"> <span><strong>ECharts
												Extension</strong><br />map.baidu.com BMap</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map10.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												MarkLine</strong><br />markLine<br />multi-series</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map9.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												MarkPoint</strong><br />Scale Roaming</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map8.html"><img
										src="asset/img/example/cache.png"> <span><strong>Sub-Region
												Mode</strong><br />sub-region mode</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map11.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												MarkLine</strong><br />glow effects, Baidu migration</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map12.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												MarkLine</strong><br />glow effect, Chinese trunk railways</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map15.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												MarkLine</strong><br />large-scale glow effects, Popularity</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map16.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												Extension</strong><br />SVG - body composition</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map17.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												Extension</strong><br />SVG - football pitch</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map18.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												Extension</strong><br />SVG - interior space data analysis</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map14.html"><img
										src="asset/img/example/cache.png"> <span><strong>Timeline</strong><br />display
											how data changes over time</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map19.html"><img
										src="asset/img/example/cache.png"> <span><strong>Extension
												+ Timeline</strong><br />simulation of 2014 World Cup goals</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/map.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/dataRange2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Data
												Range</strong><br />Customized split list</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Gauges<a name="gauge"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/gauge1.png"><a
									href="example/gauge1.html"><img
										src="asset/img/example/gauge1.png"> <span><strong>Basic
												Angular Gauge</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/gauge2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Angular Gauge</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/gauge3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Angular Gauge</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/gauge4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Angular Gauges</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/gauge5.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Angular Gauges</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/gauge.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Angular Gauge</strong><br />customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Funnel<a name="funnel"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/funnel1.png"><a
									href="example/funnel1.html"><img
										src="asset/img/example/funnel1.png"> <span><strong>Basic
												Funnel</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/funnel2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Funnels</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/funnel3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Funnels</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/funnel4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Funnels</strong><br />customizable align</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/funnel.html"><img
										src="asset/img/example/cache.png"> <span><strong>Basic
												Funnel</strong><br />customizable</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						EventRiver<a name="eventRiver"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/eventRiver1.png"><a
									href="example/eventRiver1.html"><img
										src="asset/img/example/eventRiver1.png"> <span><strong>EventRiver</strong><br />customizable</span></a>
								</li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/eventRiver2.html"><img
										src="asset/img/example/cache.png"> <span><strong>EventRiver</strong><br />customizable</span></a>
								</li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Venn<a name="venn"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/venn.html"><img
										src="asset/img/example/cache.png"> <span><strong>Venn</strong><br />customizable</span></a>
								</li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Treemap<a name="treemap"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/treemap.html"><img
										src="asset/img/example/cache.png"> <span><strong>Treemap</strong><br />Basic
											example</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/treemap1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Treemap</strong><br />Drill
											down</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/treemap2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Treemap</strong><br />customizable</span></a>
								</li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Tree<a name="tree"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/tree.html"><img
										src="asset/img/example/cache.png"> <span><strong>Tree</strong><br />Basic
											example</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/tree2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Tree</strong><br />China
											province</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/tree1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Tree</strong><br />Customizable</span></a>
								</li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Word Cloud<a name="wordCloud"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/wordCloud.html"><img
										src="asset/img/example/cache.png"> <span><strong>Word
												Cloud</strong></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Combinations<a name="mix"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Column
												+ Line</strong><br />double value axes</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix6.html"><img
										src="asset/img/example/cache.png"> <span><strong>Column
												+ Line</strong><br />range simulation</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix2.html"><img
										src="asset/img/example/cache.png"> <span><strong>Column
												+ Pie</strong><br />custom pie center</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix4.html"><img
										src="asset/img/example/cache.png"> <span><strong>Scatter
												+ Line</strong><br />synchronized of value and category axis</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix7.html"><img
										src="asset/img/example/cache.png"> <span><strong>Scatter
												+ Pie</strong><br />pie in bubble’s place, multi-series</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix10.html"><img
										src="asset/img/example/cache.png"> <span><strong>Candlestick
												+ Line</strong><br />double value axes, multi-series</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix12.html"><img
										src="asset/img/example/cache.png"> <span><strong>Line
												+ Pie</strong><br />tendency and percentage, more efficient</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix3.html"><img
										src="asset/img/example/cache.png"> <span><strong>Map
												+ Pie</strong><br />map as region selector</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix9.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Combinations</strong><br />easy connect, legend, tool sharing,
											multi-series</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix8.html"><img
										src="asset/img/example/cache.png"> <span><strong>Multiple
												Combinations</strong><br />Cartesian coordinate system, multi-series</span></a>
								</li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/mix11.html"><img
										src="asset/img/example/cache.png"> <span><strong>Business
												Intelligence(BI) Charts</strong><br />gauge, nested funnel</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Components<a name="component"> </a>
					</h3>
					<div class="section">
						<div class="thumb3">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/axis.html"><img
										src="asset/img/example/cache.png"> <span><strong>Coordinate
												System</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/doc/legend.png"><a
									href="example/legend.html"><img
										src="asset/img/doc/legend.png"> <span><strong>Legend</strong><br />customizable</span></a>
								</li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/dataZoom1.html"><img
										src="asset/img/example/cache.png"> <span><strong>Data
												Area Zoom</strong><br />basic function</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/dataZoom.html"><img
										src="asset/img/example/cache.png"> <span><strong>Data
												Area Control</strong><br />customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/tooltip.html"><img
										src="asset/img/example/cache.png"> <span><strong>Tooltip</strong><br />multilevel
											control, customizable</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/dataRange.html"><img
										src="asset/img/example/cache.png"> <span><strong>Scale
												Control</strong><br />custom layout, background, drag handle, etc</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Others<a name="other"> </a>
					</h3>
					<div class="section">
						<div class="thumb4">
							<ul class="slides">
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/dynamicLineBar.html"><img
										src="asset/img/example/cache.png"> <span><strong>Dynamic
												Data</strong><br />line, column</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/dynamicScatterK.html"><img
										src="asset/img/example/cache.png"> <span><strong>Dynamic
												Data</strong><br />scatter, candlestick</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/dynamicPieRadar.html"><img
										src="asset/img/example/cache.png"> <span><strong>Dynamic
												Data</strong><br />pie, radar</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/loading.html"><img
										src="asset/img/example/cache.png"> <span><strong>Animated
												Transition </strong><br />Loading</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/import.png"><a
									href="example/www/index.html"><img
										src="asset/img/example/import.png"> <span><strong>Single
												File Import</strong><br />modular single file echarts.js</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/import.png"><a
									href="example/www2/index.html"><img
										src="asset/img/example/import.png"> <span><strong>Single
												File Import</strong><br />plain single file echarts-all.js</span></a></li>
								<!--/li-->
								<li data-thumb="asset/img/example/cache.png"><a
									href="example/event.html"><img
										src="asset/img/example/cache.png"> <span><strong>Event
												Interaction</strong><br />link chart with the outside</span></a></li>
								<!--/li-->
							</ul>
						</div>
					</div>
				</div>
				<div>
					<h3>
						Themes<a name="theme"> </a>
					</h3>
					<p>
						Theme Preview <a href='example/theme.html#-en' target="_blank">ECharts
							Theme</a>, Custom Theme Debugger <a
							href='example/themeDesigner.html#-en' target="_blank">ECharts
							Theme Designer</a>
					</p>
					<p>
						<small>PS: Please do not rely too much on the code editing
							area, for we don't have local cache and the page will be gone
							once you refresh it. Instead, we would strongly recommend that
							you use a local editor to customize your theme, and the code
							editing area to debug it. When you finish writing your theme,
							just click on the "SaveAsImage" button at the top of the page
							(not supported by IE8-), and all the charts will be saved in a
							picture, which is the default style. Come on, show us your
							design, and make it our built-in or even default theme! As a
							reward, we will offer you a small gift and add your name to the
							contributor list.</small>
					</p>
					<a href="example/theme.html#-en" target="_blank"><img
						src="asset/img/example/theme.png" style="max-width: 100%"></a>
					<div></div>
					<h3>
						Features<a name="topic"></a>
					</h3>
					<p>
						<small>The following pages do not support old versions of
							IE; please use IE9+, chrome, safari, firefox, opear or other
							modern browsers.</small>
					</p>
					<ul>
						<li><a href="example/topic/aqi-china/index.html"
							target="_blank">Air Quality of Major Chinese Cities </a> by <a
							href="http://weibo.com/wfsr" target="_blank">Da Fo</a>(Baidu), <a
							href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng</a>(Baidu)</li>
						<li><a href="example/topic/10-me-china/index.html"
							target="_blank">Charting China's Economy (2002-2011)</a> by Yu Bo
							(Xinhua News Agency), Wu Chuyin(Nanfang Metropolis Daily), <a
							href="http://weibo.com/kenerlinfeng" target="_blank">Lin Feng</a>(Baidu)</li>
						<li><a href="example/topic/24-population-china/index.html"
							target="_blank">China's population flow (1987 - 2011)</a> by Meng
							Lixin(Tencent), Wang Feiyu(Securities Times), Yan Dong
							(Shijue.me), <a href="http://weibo.com/kenerlinfeng"
							target="_blank">Lin Feng</a>(Baidu)</li>
						<li><a
							href="http://hijiangtao.github.io/variety-show-hot-spot-vis/"
							target="_blank">TV show visual evaluation system</a> by <a
							href="http://hijiangtao.github.io/variety-show-hot-spot-vis/about/"
							target="_blank">Data.BIT</a> (Beijing Institute of Technology)</li>
						<li><a
							href="http://echarts.baidu.com/doc/example/topic/sino-japanese-war-1895/index.html"
							target="_blank">120th anniversary of the sino-japanese war</a> by
							<a href="http://weibo.com/u/3798120772" target="_blank">Fu
								Jianhai</a> (CSDN open source camp)</li>
						<li><a href="http://www.thinkgis.cn/public/sina/"
							target="_blank">2014 Sina Weibo POI Data Visualization</a> by <a
							href="http://www.weibo.com/u/1707284737" target="_blank">ThinkingGIS
						</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- /container -->

	<footer id="footer"></footer>
	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="./asset/js/jquery.min.js"></script>
	<script type="text/javascript" src="./asset/js/echartsHome.js"></script>
	<script src="./asset/js/bootstrap.min.js"></script>
	<script type="text/javascript">
    $(window).load(function (){
      var section = $('[class=section]');
      function loadImage(i) {
          setTimeout(function (){
              var list = $('div>ul>li>a', section[i]);
              var nav = $('ol>li>img', section[i]);
              var href;
              var src;
              if (list.length > 0) {
                  for (var j = 0, k = list.length; j < k; j++) {
                      list[j].target = '_blank';
                      href = list[j].href.slice(list[j].href.lastIndexOf('/') + 1, -5);
                      src = list[j].firstChild.src.replace(
                          'cache', href
                      );
                      list[j].firstChild.alt = 'ECharts ' + href;
                      list[j].firstChild.src = src;
                      list[j].href += '#-en';
                  }
              }
          }, i * 100);
      }
      for (var i = 0, l = section.length; i < l; i++) {
          loadImage(i);
      }
      
    var chartsTypeNav = document.getElementById('chartsTypeNav');
    function _scroll() {
        var navHeight = chartsTypeNav.offsetHeight;
        var viewHeight = document.documentElement.clientHeight;
        var scrollHeight = document.documentElement.scrollTop
                           || document.body.scrollTop;
        var offsetHeight = document.body.offsetHeight;
        var footHole = offsetHeight - scrollHeight - viewHeight;
        var maxHeight = viewHeight - (230 - footHole) - 80;
        if (footHole < 320 && maxHeight < navHeight) {
            // 见footer
            //chartsTypeNav.style.marginTop = footHole - 150 + 'px';
            chartsTypeNav.style.marginTop = maxHeight - navHeight + 'px';
        }
        else {
            // 未见footer
            chartsTypeNav.style.marginTop = 'auto';
        }
        
        var len = offsetList.length;
        if (scrollHeight > offsetList[len - 3].offsetTop) {
                navDom[len - 2].style.backgroundColor = '#3E98C5';
                $(navDom[len - 2]).children('a')[0].style.color = '#fff';
        }
        else {
            for (var i = 0; i < len - 1; i++) {
                if (Math.abs(scrollHeight - offsetList[i].offsetTop) < 280 && navDom[i]) {
                    navDom[i].style.backgroundColor = '#3E98C5';
                    $(navDom[i]).children('a')[0].style.color = '#fff';
                }
                else {
                    navDom[i].style.backgroundColor = 'transparent';
                    $(navDom[i]).children('a')[0].style.color = '#3E98C5';
                }
            }
        }
    }
    var offsetList = [];
    var navDom = $('#chartsTypeNav>ul>li');
    function _resize() {
        offsetList = [];
        $('h3').each(function(idx, dom){
            offsetList[idx] = {
                name : dom.childNodes[1].name, 
                offsetTop : dom.childNodes[1].offsetTop
            };
        });
        offsetList.push({
            name : 'topic',
            offsetTop : 100000
        })
        setTimeout(_scroll, 500);
    }
    
    function scroll2Pos (idx) {
        return function() {
            $("body,html").animate(
                {scrollTop: offsetList[idx].offsetTop + 30},
                500
            );
            return false;
        }
    }
    $('#chartsTypeNav>ul>li>a').each(function(idx, dom){
        $(dom).on('click', scroll2Pos(idx));
    })
    $(window).on('scroll', _scroll);
    $(window).on('resize', _resize);
    _resize();
    });
    </script>
</body>
</html>
